// 逻辑代码
// 0. 获取元素
// 0-1. 分类列表 ul
const cateBox = document.querySelector('.cate')
// 0-2. 品牌列表
const propsBox = document.querySelector('.props')
// 0-3. 分页盒子
const pageBox = document.querySelector('.pagination')
// 0-4. 商品列表
const goodsBox = document.querySelector('.main>.contain>.list')
// 0-5. 获取整体盒子
const box = document.querySelector('.container')

console.log(pageBox)

// 1. 准备一个参数的数据集合
const params = {
  q: '*',
  cate: '',
  props: '',
  sort: '',
  page: 0,
  callback: 'fn'
}

// 准备一个变量, 表示商品列表
let goodsList = []

// 功能函数, queryStringify()
function queryStringify(obj) {
  let str = ''

  for (let k in obj) {
    str += k + '=' + obj[k] + '&'
  }

  return str.slice(0, -1)
}

// 2. 请求数据的函数
getList()
function getList() {
  // jsonp 利用的是 script 标签的 src 属性
  // 前端提前准备好回调函数
  // 2-1. 创建一个 script 标签
  const script = document.createElement('script')
  // 2-2. 手动添加 src 属性
  script.src = `https://search.mall.360.cn/search/q?${queryStringify(params)}`
  // 2-3. 把 script 标签插入到页面内
  document.body.appendChild(script)
  // 2-4. 把 script 标签删除
  script.remove()
}

// 3. 全局准备一个回调函数 fn, 用于渲染页面
function fn(res) {
  console.log(res)
  // 3-1. 渲染分类内容
  bindCateList(res.data.cates.subs)

  // 3-2. 渲染品牌数据
  res.data.options[0] && bindPropsList(res.data.options[0].subs)

  // 3-3. 渲染分页
  bindPagenation(res.total)

  // 3-4. 渲染商品列表
  bindGoodsList(res.data.list)
  goodsList = res.data.list
}

// 3-1. 渲染分类
function bindCateList(list) {
  let str = ''
  str += `
   <li class="cate_item">分类:</li>
   `
  list.forEach(item => {
    str += `
      <li class="cate_item" data-value="${item.value}">${item.text}</li>
    `
  })
  cateBox.innerHTML = str
}








// 3-2. 渲染品牌
function bindPropsList(list) {
  let str = ''
  str += `
   <li class="props_item">品牌:</li>
 `
  list.forEach(item => {
    str += `
      <li class="props_item" data-value="${item.value}">${item.text}</li>
    `
  })
  propsBox.innerHTML = str
}

// 3-3. 渲染分页
function bindPagenation(total) {
  const num = Math.ceil(total / 20)
  let str = `
  <div class="contain">
    <span class="prevBtn">上一页</span>
    <ul>
  `

  for (let i = 0; i < num; i++) {
    str += `<li class="page_item" data-value="${i}">${i + 1}</li>`
  }


  str += `
    </ul>
    <span class="nextBtn">下一页</span>
    </div>
  `

  pageBox.innerHTML = str
}

// 3-4. 商品列表
function bindGoodsList(list) {
  console.log(list)
  let str = ''

  list.forEach(item => {
    str += `
      <li data-id="${item.itemId}">
        <img src="${item.img}" alt="">
        <span>${item.title}</span>
        <p>
          ${(item.price / 100).toFixed(2)}
        </p>
        <button data-id="${item.itemId}">加入购物车</button>
      </li>
    `
  })

  goodsBox.innerHTML = str
}

// 4. 各种点击事件
box.addEventListener('click', e => {
  const t = e.target

  // 4-1. 判断分类
  if (t.className === 'cate_item') {
    // 拿到标签身上的 value 赋值给 params.cate
    params.cate = t.dataset.value
    params.page = 0
    // 从新请求数据渲染页面
    getList()
  }

  // 4-2. 判断品牌
  if (t.className === 'props_item') {
    params.props = t.dataset.value
    params.page = 0
    getList()
  }

  // 4-3. 排序操作
  if (t.className === 'sort_item') {
    params.sort = t.dataset.value
    getList()
  }



  // 4-5. 切换到某一页
  if (t.className === 'page_item') {
    params.page = t.dataset.value
    getList()
  }
})

// 5. 点击加入购物车
// 注意: 因为是模拟, 所以我们用 localStorage 模拟
//      我们把需要加入到 购物车 内的数据, 添加到 localStorage 内
goodsBox.addEventListener('click', e => {
  if (e.target.nodeName !== 'LI') return

  // 需要拿到当前这件商品的信息
  // 5-1. 能拿到商品 id
  const goods_id = e.target.dataset.id
  // 5-2. 需要从商品列表数据内, 拿到 id 对应的商品信息
  // 注意: info 就是我们本次点击需要加入到 购物车 的数据信息
  const info = goodsList.find(item => item.itemId === goods_id)

  // 5-3. 拿到 localStorage 内的数组
  // 从 localStroage 内拿到一个购物车数组
  //   如果 localStorage 内有, 就直接使用, 如果没有, 就定义为一个空数组
  const cartList = JSON.parse(window.localStorage.getItem('cart')) || []

  // 5-3. 查看 cartList 内是否有 info 这一条数据了
  // 查看 cartList 内是否有 itemId === goods_id 的数据
  const repeatInfo = cartList.find(item => item.itemId === goods_id)

  // 5-4. 判断插入数据
  if (repeatInfo) {
    // 表示有重复数据
    repeatInfo.number++
  } else {
    // 表示没有重复数据
    info.number = 1
    info.is_select = false
    cartList.push(info)
  }

  // 5-5. 把修改过的 cartList 重新存储到 localStorage 内
  window.localStorage.setItem('cart', JSON.stringify(cartList))
})




const button = document.querySelector('.container.main>.contain>ul>li>button')

goodsBox.addEventListener("click", e => {
    if (e.target.nodeName === 'LI') {
        //  console.log(e.target.dataset.id)
        const idName = e.target.dataset.id
        console.log(idName)
        window.sessionStorage.setItem('idName', idName)
        window.location.href = './detail.html'
    }

    if (e.target.nodeName === 'BUTTON') {
        const idName = e.target.dataset.id
        // console.log(goodId)
        window.sessionStorage.setItem('idName', idName)
        window.location.href = './cart.html'
    }
    
})